<template>
  <a-modal
    v-model:visible="innerVisible"
    :mask="false"
    width="100%"
    wrap-class-name="full-page-modal !inset-1 xxs:!inset-4.5 sl-dialog"
    :get-container="getContainer"
    @cancel="cancel"
  >
    <slot />
    <template v-if="customFooter" #footer>
      <slot name="footer" />
    </template>
    <template v-else #footer>
      <a-button @click="cancel">{{ t("common.cancel") }}</a-button>
      <a-button @click="$emit('ok', false)">{{ t("common.ok") }}</a-button>
      <a-button type="primary" @click="$emit('ok', true)">{{ t("common.okAndAdd") }}</a-button>
    </template>
  </a-modal>
</template>
<script lang="ts" setup>
import { ref, watch } from "vue";
import { useI18n } from "/@/locales/useI18n";

const props = withDefaults(
  defineProps<{
    getContainer?: () => HTMLElement;
    customFooter?: boolean;
    visible?: boolean;
  }>(),
  {
    getContainer() {
      return document.getElementById("home-content") || document.body;
    },
    customFooter: false,
    visible: false,
  }
);
const emits = defineEmits<{
  (event: "cancel"): void;
  (event: "ok", isContinue: boolean): void;
  (event: "update:visible", e: boolean): void;
  (event: "open", isFirstOpen: boolean): void;
}>();
const { t } = useI18n();
//因为要监听open事件，所以要定义这个内部属性并实现双向绑定
const innerVisible = ref(false);
watch(innerVisible, (v) => {
  emits("update:visible", v);
});
let isFirstOpen = true;
watch(
  () => props.visible,
  (v) => {
    innerVisible.value = v;
    if (v) {
      emits("open", isFirstOpen);
      isFirstOpen = false;
    }
  }
);
function cancel() {
  innerVisible.value = false;
  emits("cancel");
}
</script>
<style lang="less">
.full-page-modal {
  position: absolute !important;
  .ant-modal-header {
    padding: 16px 22px;
  }
  .ant-modal-title {
    font-size: 20px;
    color: @color-header;
  }
  .ant-modal {
    max-width: 100%;
    top: 0;
    padding-bottom: 0;
    margin: 0;
    height: 100%;
  }
  .ant-modal-content {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .ant-modal-body {
    flex: 1;
    overflow: auto;
  }
}
</style>
